<template>
  <div>
    我是组件 b
    <h3> {{ $store.state.user.username }} --- {{ $store.state.setting.address }} </h3>
    <h3> {{ $store.getters.userUsername }} </h3>
    <h3> {{ settingAddress }} </h3>

    <button @click="changeUsername">修改username</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations, createNamespacedHelpers } from 'vuex'
const { mapMutations: userMapMutations } = createNamespacedHelpers('user')

export default {
  name: 'child-b',
  computed: {
    ...mapGetters(['settingAddress'])
  },
  methods: {
    ...mapMutations(['addCount']),
    ...userMapMutations(['changeUsername'])

    // ...mapMutations(['user/changeUsername']),

    // changeFn () {
    //   // this.$store.commit('addCount', 8)

    //   // 1. 模块名/方法名 
    //   // this.$store.commit('user/changeUsername')

    //   // 2. 通过展开运算符 提取出 ['user/changeUsername']方法
    //   // this['user/changeUsername']()

    //   // 3. 直接调用
    //   this.changeUsername()
    // }
  }
}
</script>

<style>

</style>